<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>优选商城 - 首页</title>
    <style>
        .product-card {
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .carousel-item img {
            height: 400px;
            object-fit: cover;
        }
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
        }
        .category-card {
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .category-card i {
            color: #1e3c72;
            transition: all 0.3s ease;
        }
        
        .category-card:hover i {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <!-- Toast提示容器 -->
        <div class="toast-container">
            <div th:if="${error}" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi bi-exclamation-circle me-2"></i>
                        <span th:text="${error}"></span>
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
            <div th:if="${success}" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi bi-check-circle me-2"></i>
                        <span th:text="${success}"></span>
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        </div>

        <!-- 轮播图 -->
        <div id="mainCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&h=400&q=80" class="d-block w-100" alt="促销活动1">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>限时促销</h5>
                        <p>全场商品8折起</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1607083206968-13611e3d76db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&h=400&q=80" class="d-block w-100" alt="促销活动2">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>新品上市</h5>
                        <p>查看最新商品</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1607083206968-13611e3d76db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&h=400&q=80" class="d-block w-100" alt="促销活动3">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>品质保证</h5>
                        <p>正品保障，假一赔十</p>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

        <!-- 商品分类 -->
        <div class="container my-5">
            <h2 class="mb-4 text-center">商品分类</h2>
            <div class="row">
                <div th:if="${categories != null}" th:each="category : ${categories}" class="col-md-3 mb-4">
                    <a th:href="@{/category/{id}(id=${category.id})}" class="text-decoration-none">
                        <div class="card h-100 category-card">
                        <div class="card-body text-center">
                            <i th:if="${category.icon != null}" th:class="${category.icon}" style="font-size: 2rem;"></i>
                            <i th:unless="${category.icon != null}" class="bi bi-tag" style="font-size: 2rem;"></i>
                            <h5 class="card-title mt-2" th:text="${category.name}">分类名称</h5>
                        </div>
                    </div>
                    </a>
                </div>
                <!-- 静态分类示例 -->
                <div th:if="${categories == null || #lists.isEmpty(categories)}">
                    <div class="col-md-3 mb-4">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <i class="bi bi-laptop" style="font-size: 2rem;"></i>
                                <h5 class="card-title mt-2">电子产品</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-4">
                <a href="/category" class="btn btn-primary">查看全部分类</a>
            </div>
        </div>

        <!-- 热门商品 -->
        <div class="container my-5">
            <h2 class="mb-4 text-center">热门商品</h2>
            <div class="row">
                <div th:if="${products != null}" th:each="product : ${products}" class="col-md-3 mb-4">
                    <div class="card product-card h-100">
                        <img th:if="${product.mainImage != null}" th:src="${product.mainImage}" class="card-img-top" alt="商品图片">
                        <img th:unless="${product.mainImage != null}" src="https://via.placeholder.com/300x200" class="card-img-top" alt="商品图片">
                        <div class="card-body">
                            <h5 class="card-title" th:text="${product.name}">商品名称</h5>
                            <p class="card-text" th:text="${product.subtitle}">商品描述</p>
                            <p class="card-text text-danger fw-bold">¥<span th:text="${product.price}">0.00</span></p>
                            <div class="d-flex">
                                <a th:href="@{/product/detail/{id}(id=${product.id})}" class="btn btn-sm btn-outline-primary me-2">查看详情</a>
                                <button class="btn btn-sm btn-primary" th:attr="data-product-id=${product.id}" onclick="addToCart(this)">加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 静态商品示例 -->
                <div th:if="${products == null || #lists.isEmpty(products)}" class="col-md-3 mb-4">
                    <div class="card product-card h-100">
                        <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="商品图片">
                        <div class="card-body">
                            <h5 class="card-title">智能手机</h5>
                            <p class="card-text">最新款高性能智能手机</p>
                            <p class="card-text text-danger fw-bold">¥3999.00</p>
                            <a href="#" class="btn btn-primary">加入购物车</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:fragment="script">
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化轮播图
            var myCarousel = document.getElementById('mainCarousel');
            if (myCarousel) {
                var carousel = new bootstrap.Carousel(myCarousel, {
                    interval: 3000
                });
            }

            // 初始化所有Toast
            var toastElList = [].slice.call(document.querySelectorAll('.toast'));
            var toastList = toastElList.map(function(toastEl) {
                return new bootstrap.Toast(toastEl, {
                    autohide: true,
                    delay: 3000
                });
            });
            
            // 显示所有Toast
            toastList.forEach(toast => toast.show());
        });
        
        // 加入购物车
        function addToCart(btn) {
            const productId = btn.getAttribute('data-product-id');
            
            // 发送AJAX请求
            $.ajax({
                url: '/cart/add',
                type: 'POST',
                data: {
                    productId: productId,
                    quantity: 1
                },
                success: function(res) {
                    if (res.code === 0) {
                        showToast('已成功添加到购物车', 'success');
                    } else {
                        showToast(res.msg || '添加失败', 'danger');
                    }
                },
                error: function() {
                    showToast('请求失败，请重试', 'danger');
                }
            });
        }
        
        // 显示Toast提示
        function showToast(message, type) {
            const toastContainer = document.querySelector('.toast-container');
            if (!toastContainer) return;
            
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.setAttribute('role', 'alert');
            toast.setAttribute('aria-live', 'assertive');
            toast.setAttribute('aria-atomic', 'true');
            
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="bi bi-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `;
            
            toastContainer.appendChild(toast);
            const bsToast = new bootstrap.Toast(toast, {
                autohide: true,
                delay: 3000
            });
            
            bsToast.show();
            
            // 自动移除toast元素
            toast.addEventListener('hidden.bs.toast', function () {
                toast.remove();
            });
        }
    </script>
</body>
</html> 